<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName(
                        '/data-retrieval/index'
                    )"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{
                        item.meta.title
                    }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>检索列表</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="layout">
            <el-scrollbar class="layout-left" :class="{ hide: !layout }">
                <el-tree
                    ref="tree"
                    node-key="id"
                    highlight-current
                    :current-node-key="typeId"
                    :data="retrieveData"
                    :props="defaultProps"
                    :default-expanded-keys="setCurrentId"
                    :default-checked-keys="setCurrentKey"
                    @node-click="handleNodeClick"
                >
                    <span class="custom-tree-node" slot-scope="{ data, node }">
                        <span :class="{ first: node.level === 1 }"
                            >{{ data.name }}({{ data.count }})</span
                        >
                    </span>
                </el-tree>
            </el-scrollbar>
            <div class="icon">
                <i
                    :class="
                        layout ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
                    "
                    @click="handleChangeStyle"
                ></i>
            </div>
            <div class="layout-right" :class="{ show: !layout }">
                <div class="content-box" v-if="itemList.length > 0">
                    <div
                        class="retrieval-box"
                        :style="autoHeight ? 'height:auto' : 'height:56px'"
                    >
                        <el-tooltip
                            effect="dark"
                            :content="autoHeight ? '收起' : '展开'"
                            placement="left"
                        >
                            <i
                                class="btn-icon"
                                :class="
                                    autoHeight
                                        ? 'el-icon-arrow-down'
                                        : 'el-icon-arrow-up'
                                "
                                @click="autoHeight = !autoHeight"
                            ></i>
                        </el-tooltip>
                        <div class="search-left">
                            <div class="search-group">
                                <div
                                    v-for="(item, index) in itemList"
                                    :key="index"
                                    class="search-wrap"
                                >
                                    <span
                                        v-if="
                                            ![
                                                'create_time',
                                                'city_code',
                                                'collector'
                                            ].includes(item.field)
                                        "
                                        :class="{
                                            active: item.active === true
                                        }"
                                        class="icon-btn"
                                        @click="selectedItem(item)"
                                    ></span>
                                    <i
                                        v-if="
                                            ![
                                                'create_time',
                                                'city_code',
                                                'collector'
                                            ].includes(item.field)
                                        "
                                        class="el-icon-error del-icon"
                                        @click="deleteItem(item, index)"
                                    ></i>
                                    <el-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="item.fieldName"
                                        placement="top"
                                    >
                                        <span class="keyword">{{
                                            item.fieldName
                                        }}</span>
                                    </el-tooltip>
                                    <check-conditions
                                        v-if="
                                            !['3', '6'].includes(
                                                item.valueKindId
                                            ) &&
                                                ![
                                                    'city_code',
                                                    'collector'
                                                ].includes(item.field)
                                        "
                                        :isShow="Number(item.valueKindId) === 7"
                                        v-model="item.conditionValue"
                                    ></check-conditions>

                                    <div
                                        class="search-item"
                                        :class="{
                                            hasClass: ['3', '6', '7'].includes(
                                                item.valueKindId
                                            )
                                        }"
                                    >
                                        <el-select
                                            v-if="
                                                item.valueKindId === '7' &&
                                                    item.field === 'city_code'
                                            "
                                            :multiple="item.multi"
                                            :collapse-tags="item.multi"
                                            clearable
                                            v-model="item.keyword1"
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="item in item.selects"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.code"
                                            >
                                            </el-option>
                                        </el-select>
                                        <el-select
                                            v-if="
                                                item.valueKindId === '6' ||
                                                    (item.valueKindId === '7' &&
                                                        item.field !==
                                                            'city_code')
                                            "
                                            :multiple="item.multi"
                                            :collapse-tags="item.multi"
                                            clearable
                                            v-model="item.keyword1"
                                            placeholder="请选择"
                                        >
                                            <el-option
                                                v-for="item in item.selects"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.name"
                                            >
                                            </el-option>
                                        </el-select>
                                        <el-date-picker
                                            v-if="item.valueKindId === '3'"
                                            v-model="item.keyword1"
                                            type="daterange"
                                            range-separator="-"
                                            start-placeholder="例:1991-01-01"
                                            end-placeholder="1991-12-31"
                                            value-format="yyyy-MM-dd"
                                        >
                                        </el-date-picker>
                                        <el-input
                                            class="input"
                                            v-if="
                                                !['3', '6', '7'].includes(
                                                    item.valueKindId
                                                )
                                            "
                                            v-model="item.keyword1"
                                            placeholder="请输入"
                                        >
                                        </el-input>
                                        <el-input
                                            class="input"
                                            v-if="
                                                item.conditionValue === '4' &&
                                                    item.valueKindId !== '3'
                                            "
                                            v-model="item.keyword2"
                                            placeholder="请输入"
                                        >
                                        </el-input>
                                    </div>
                                </div>
                                <div class="btn">
                                    <el-button
                                        type="primary"
                                        icon="el-icon-plus"
                                        @click="maskShow"
                                        >添加检索条件</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        @click="handleStartSearch"
                                        >检索</el-button
                                    >
                                    <span @click="handleSave">保存为常用</span>
                                </div>
                            </div>
                            <div class="search-left-footer">
                                <div class="common-search">
                                    <p>常用检索</p>
                                    <ul>
                                        <li
                                            v-for="(item,
                                            index) in conditionList"
                                            :key="index"
                                            @click.prevent="handlePush(item)"
                                        >
                                            <el-tooltip
                                                class="item"
                                                effect="dark"
                                                :content="item.name"
                                                placement="top"
                                            >
                                                <span>{{ item.name }}</span>
                                            </el-tooltip>
                                            <i
                                                @click.stop="
                                                    handleRemoveItem(item)
                                                "
                                                class="el-icon-delete-solid"
                                            ></i>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container" :style="{}">
                        <div class="content" v-if="tableData.length > 0">
                            <div class="download">
                                <div
                                    @click="dialogExport = true"
                                    v-if="tableData.length"
                                    class="btn"
                                >
                                    <i class="el-icon-download"></i>
                                    <span>导出当前搜索结果</span>
                                </div>
                                <div v-else class="btn">
                                    <i class="el-icon-download"></i>
                                    <span>导出当前搜索结果</span>
                                </div>
                                <div>
                                    <el-button
                                        size="small"
                                        type="primary"
                                        @click="toAdd"
                                        >新增</el-button
                                    >
                                    <el-button
                                        size="small"
                                        type="primary"
                                        :disabled="!tableData.length"
                                        @click="handleSelectTableTitle"
                                        >更多展示项</el-button
                                    >
                                </div>
                            </div>
                            <el-table
                                :data="tableData"
                                ref="multipleTable"
                                class="pbb__table"
                                header-cell-class-name="pbb__table-thead"
                                cell-class-name="pbb__table-thead-cell"
                                row-class-name="pbb__table-thead-row"
                                row-key="id"
                                @selection-change="handleSelectionChange"
                            >
                                <el-table-column
                                    align="center"
                                    type="selection"
                                    :reserve-selection="true"
                                    width="50"
                                >
                                </el-table-column>
                                <el-table-column
                                    label="序号"
                                    align="center"
                                    type="index"
                                    :index="indexMethod"
                                    width="80"
                                >
                                </el-table-column>
                                <el-table-column
                                    label="采集日期"
                                    prop="create_time"
                                    min-width="120"
                                    fit
                                >
                                    <template slot-scope="scope">
                                        {{
                                            scope.row.create_time.substring(
                                                0,
                                                10
                                            )
                                        }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="采集区域"
                                    prop="city_code"
                                    min-width="120"
                                    fit
                                ></el-table-column>
                                <el-table-column
                                    label="采集人"
                                    prop="collector"
                                    min-width="120"
                                    fit
                                ></el-table-column>
                                <el-table-column
                                    v-for="item in tableColumn"
                                    :key="item.fieldName"
                                    :prop="item.field"
                                    :label="item.fieldName"
                                    :show-overflow-tooltip="
                                        [3, 4, 6, 7, 12].includes(
                                            item.valueKindId
                                        )
                                    "
                                    :min-width="
                                        [3, 11].includes(item.valueKindId)
                                            ? '200px'
                                            : [5, 8].includes(item.valueKindId)
                                            ? '140px'
                                            : item.fieldName.length * 16 + 20 >
                                              140
                                            ? item.fieldName.length * 16 +
                                              20 +
                                              'px'
                                            : '140px'
                                    "
                                    fit
                                >
                                    <template slot-scope="scope">
                                        <div v-if="item.valueKindId === '5'">
                                            <div
                                                v-if="
                                                    scope.row[item.field] &&
                                                        scope.row[item.field]
                                                            .length
                                                "
                                            >
                                                <el-button
                                                    type="primary"
                                                    @click="
                                                        previewImg(
                                                            scope.row[
                                                                item.field
                                                            ].split(',')
                                                        )
                                                    "
                                                    >查看图片</el-button
                                                >
                                            </div>
                                        </div>
                                        <div
                                            v-else-if="item.valueKindId === '8'"
                                        >
                                            <div
                                                v-if="
                                                    scope.row[item.field] &&
                                                        scope.row[item.field]
                                                            .length
                                                "
                                            >
                                                <el-button
                                                    type="primary"
                                                    @click="
                                                        videoPlay(
                                                            scope.row[
                                                                item.field
                                                            ]
                                                        )
                                                    "
                                                    >点击播放</el-button
                                                >
                                            </div>
                                        </div>
                                        <div
                                            v-else-if="item.valueKindId === '9'"
                                        >
                                            <div
                                                v-if="
                                                    scope.row[item.field] &&
                                                        scope.row[item.field]
                                                            .length
                                                "
                                            >
                                                <el-button
                                                    type="text"
                                                    @click="
                                                        previewVideo(
                                                            scope.row[
                                                                item.field
                                                            ],
                                                            'record'
                                                        )
                                                    "
                                                >
                                                    播放
                                                </el-button>
                                            </div>
                                        </div>
                                        <div
                                            v-else-if="
                                                item.valueKindId === '10'
                                            "
                                        >
                                            <div
                                                v-if="
                                                    scope.row[item.field] &&
                                                        scope.row[item.field]
                                                            .length
                                                "
                                            >
                                                <el-link
                                                    class="table-file"
                                                    v-for="(it, idx) in scope
                                                        .row[item.field]"
                                                    :key="idx"
                                                    type="primary"
                                                    :href="
                                                        $staticUrl + '/' + it
                                                    "
                                                    target="_blank"
                                                >
                                                    文件{{ idx + 1 }}
                                                </el-link>
                                            </div>
                                        </div>
                                        <span
                                            v-else
                                            class="other-span"
                                            :title="scope.row[item.field]"
                                        >
                                            {{ scope.row[item.field] }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    fixed="right"
                                    align="center"
                                    width="140"
                                    label="操作"
                                >
                                    <template slot-scope="scope">
                                        <div class="btn-area">
                                            <el-tooltip
                                                v-if="scope.row.attachFlag"
                                                class="item"
                                                effect="dark"
                                                content="附件"
                                                placement="top"
                                            >
                                                <i
                                                    class="el-icon-paperclip"
                                                ></i>
                                            </el-tooltip>
                                            <el-button
                                                type="text"
                                                size="small"
                                                @click="goToDetails(scope.row)"
                                                >详情</el-button
                                            >
                                            <el-button
                                                type="text"
                                                size="small"
                                                @click="goToEdit(scope.row)"
                                                >修改</el-button
                                            >
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="page-base-footer">
                                <div class="page-base-footer__right">
                                    <div class="num-box">
                                        已选<span>{{
                                            multipleSelection.length
                                        }}</span
                                        >条
                                    </div>
                                    <el-divider
                                        direction="vertical"
                                    ></el-divider>
                                    <el-button
                                        :disabled="
                                            multipleSelection.length === 0
                                        "
                                        type="primary"
                                        @click="handleExprotAnnex"
                                        >导出附件</el-button
                                    >
                                </div>
                                <pagination
                                    :total="total"
                                    :page.sync="currentPage"
                                    :limit.sync="pageSize"
                                    @pagination="getTable"
                                />
                            </div>
                        </div>
                        <ask-empty-text
                            v-else
                            style="background: #fff"
                        ></ask-empty-text>
                    </div>
                </div>
                <ask-empty-text
                    v-else
                    style="background: #fff"
                ></ask-empty-text>
            </div>
        </div>
        <el-dialog
            title="自定义检索条件"
            :visible.sync="dialogVisible"
            width="40%"
            center
            :before-close="handleClose"
            class="tree-dialog"
        >
            <div class="tree-box">
                <div class="tree-box-left">
                    <p>请选择你需要检索的选项</p>
                    <el-tree
                        :data="childDataFilter"
                        show-checkbox
                        node-key="id"
                        ref="termTree"
                        :default-expanded-keys="expandedKeys"
                        :props="childProps"
                        @check="handleCheckChange"
                    >
                    </el-tree>
                </div>
                <div class="tree-box-right">
                    <p>已选择条件(最多6条)</p>
                    <el-checkbox-group
                        v-model="searchNameList"
                        @change="handleValChange"
                    >
                        <el-checkbox
                            v-for="(item, index) in searchList"
                            :key="index"
                            :label="item"
                            >{{ item.fieldName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSetSearchRule"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="自定义表格展示项"
            :visible.sync="tableVisible"
            width="40%"
            center
            :before-close="handleClose"
            class="tree-dialog"
        >
            <div class="tree-box">
                <div class="tree-box-left">
                    <p>请选择你需要展示的选项</p>
                    <el-tree
                        :data="newChildData"
                        show-checkbox
                        node-key="id"
                        ref="titleTree"
                        :default-checked-keys="checkKeys"
                        :default-expanded-keys="expandedKeys"
                        :props="childProps"
                        @check="CheckChange"
                    >
                    </el-tree>
                </div>
                <div class="tree-box-right">
                    <p>已选择检索结果(最多30个)</p>
                    <el-checkbox-group
                        v-model="tableTitleNameList"
                        @change="handleChange"
                    >
                        <el-checkbox
                            v-for="(item, index) in tableTitleList"
                            :key="index"
                            :label="item"
                            >{{ item.fieldName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="tableVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSetTableTitleRule"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="导出"
            class="export-dialog"
            :visible.sync="dialogExport"
            width="30%"
            @close="handeleColse"
        >
            <el-form label-position="top">
                <el-form-item
                    label="选择导出序号"
                    required
                    class="serial-number"
                >
                    <div class="group">
                        <el-input
                            v-model.number="startNumber"
                            placeholder="请输入开始序号"
                            autocomplete="off"
                            size="small"
                        ></el-input>
                        <span>至</span>
                        <el-input
                            v-model.number="endNumber"
                            placeholder="请输入结束序号"
                            autocomplete="off"
                            size="small"
                        ></el-input>
                    </div>
                    <font class="tips"
                        >最多支持导出5000条(包含有图片选项时最多支持100条)</font
                    >
                </el-form-item>
                <el-form-item label="选择导出列">
                    <el-select
                        v-model="exportColumnList"
                        multiple
                        placeholder="请选择(默认全部)"
                        @change="changeSelect"
                        @remove-tag="removeTag"
                    >
                        <el-option
                            label="全选"
                            value="ALL"
                            @click.native="selectAll"
                            v-if="exprotTableCum.length"
                        >
                        </el-option>
                        <el-option
                            v-for="item in exprotTableCum"
                            :key="item.field"
                            :label="item.fieldName"
                            :value="item.field"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handeleColse">取 消</el-button>
                <el-button type="primary" @click="handleExport()"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            title="导出附件"
            :visible.sync="enclosureDialog"
            width="30%"
            class="annex-mask"
            @close="closeAnnex"
            @open="openAnnex"
        >
            <div v-if="exportAnnexList.length > 0">
                <p>目前仅支持导出前1000条数据</p>
                <div>
                    <span>选择导出附件:</span>
                    <el-checkbox-group v-model="exportCheckList">
                        <el-checkbox
                            v-for="item in exportAnnexList"
                            :key="item.id"
                            :label="item.field"
                            >{{ item.fieldName }}</el-checkbox
                        >
                    </el-checkbox-group>
                </div>
                <div>
                    <span>附件名称:</span>
                    <el-select
                        v-model="annexName"
                        multiple
                        :multiple-limit="3"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="(item, index) in newTableColumn"
                            :key="index"
                            :value="item.field"
                            :label="item.fieldName"
                        >
                        </el-option>
                    </el-select>
                    <p>选择某一列数据内容为导出的附件命名(最多可选择三个)</p>
                </div>
            </div>
            <p v-else>选择的列表项暂无附件</p>
            <span
                slot="footer"
                v-if="exportAnnexList.length > 0"
                class="dialog-footer"
            >
                <el-button @click="closeExprot">取 消</el-button>
                <el-button
                    :disabled="exportAnnexList.length === 0"
                    type="primary"
                    @click="exportAnnex"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import CheckConditions from "./components/check-conditions/index.vue";
import { dialogPreviewImg } from "@/components/public/preview-img/index";
import { dialogPreviewVideoAudio } from "@core/public/preview-video-audio/index";
import { State } from "vuex-class";
import { downLoadBase64File } from "@/utils";
@Component({
    name: "DataRetrievalList",
    components: { CheckConditions }
})
export default class DataRetrievalList extends Vue {
    @State(state => state.authArea) authArea: any;
    layout = true;
    // 已选择检索条件的数组
    itemList: any[] = [];

    // 已存在的检索条件
    conditionList: any[] = [];
    // 检索条件的总数组
    retrieveData: any[] = [];
    // 列表头以及检索条件的数组
    childData: any[] = [];
    defaultProps = {
        children: "list",
        label: "name"
    };

    childProps = {
        children: "labelList",
        label: "fieldName"
    };

    // 表格的数据
    tableData: any[] = [];
    // 表格的动态表头
    tableColumn: any[] = [];
    tableVisible = false;
    // 选择导出附件的项
    multipleSelection: any[] = [];

    // 用来存储已经选择的值
    changeList: any[] = [];
    // 用来表示表头默认选择当前数组的前十项
    newList: any[] = [];
    // 已选择的检索条件数组
    searchList: any[] = [];
    // 已选择检索条件复选框组件绑定的值
    searchNameList: any[] = [];
    // 已选择表头展示字段复选框组件绑定的值
    tableTitleNameList: any[] = [];
    tableTitleList: any[] = [];
    // 选择的检索条件用于向后端交换数据
    searchConditionVoList: any[] = [];
    // 检索条件弹窗的显示与隐藏
    dialogVisible = false;
    // 导出附件的弹窗
    enclosureDialog = false;
    // 当前二级分类的typeId  用于查询数据
    // 设置默认选中的状态
    setCurrentId: any[] = [];
    setCurrentKey: any[] = [];
    // 人员信息
    personList: any[] = [];
    // 采集区域
    beatList: any[] = [];
    queryCurrentId = "";
    queryCurrentFiled = "";
    typeId = "";
    title = "";
    title1 = "";
    title2 = "";
    // 分页器的各项数据
    pageSize = 10;
    currentPage = 1;
    total = 0;
    // 导出表头的弹窗
    dialogExport = false;
    startNumber = "";
    endNumber = "";
    exportColumnList: any[] = [];
    exportAnnexList: any[] = [];
    exportCheckList: any[] = [];
    annexNameList: any[] = [];
    annexName: any[] = [];
    autoHeight = false;

    // 检索条件的过滤 isSearchShow=1在检索条件里就不显示
    get childDataFilter() {
        let list: any[] = [];
        if (this.childData) {
            const newList: any[] = JSON.parse(JSON.stringify(this.childData));
            list = newList.filter((item: any) => {
                return (item.labelList = item.labelList.filter((i: any) => {
                    return i.isSearchShow === 0;
                }));
            });
            list = list.filter((item: any) => {
                if (item.labelList) {
                    return item.labelList.length > 0;
                }
            });
            return list;
        }
    }

    get newChildData() {
        return JSON.parse(JSON.stringify(this.childData));
    }

    get exprotTableCum() {
        const list: any[] = [];
        this.newChildData.forEach((item: any) => {
            item.labelList.forEach((subItem: any) => {
                list.push(subItem);
            });
        });
        return list;
    }

    // 列表字段默认选择前十个
    get checkKeys() {
        const list: any[] = [];
        const nameList: any[] = [];
        this.newList.forEach((item: any) => {
            list.push(item.id);
        });
        this.newChildData.forEach((item: any) => {
            item.labelList.forEach((subItem: any) => {
                this.newList.forEach((sub: any) => {
                    if (subItem.id === sub.id) {
                        nameList.push(subItem);
                    }
                });
            });
        });
        this.tableTitleNameList = nameList;
        this.tableTitleList = nameList;
        return list;
    }

    // 导出字段树 默认展开第一个
    get expandedKeys() {
        const list: any[] = [];
        if (this.newChildData.length > 0) {
            list.push(this.newChildData[0].id);
        }
        return list;
    }

    get newTableColumn() {
        const list: any[] = this.tableColumn.filter(
            (item: any) =>
                item.valueKindId !== "2" &&
                item.valueKindId !== "4" &&
                item.valueKindId !== "5" &&
                item.valueKindId !== "8" &&
                item.valueKindId !== "9" &&
                item.valueKindId !== "10"
        );
        return list;
    }

    // 监听已选择的检索条件长度
    @Watch("searchList")
    changSearchList(val: any) {
        if (this.childDataFilter) {
            this.childDataFilter.forEach((item: any) => {
                item.labelList.forEach((subItem: any) => {
                    if (val.length > 5) {
                        subItem.disabled = true;
                    } else {
                        subItem.disabled = false;
                    }
                });
            });
        }
    }

    // 监听以选择表头长度
    @Watch("tableTitleList")
    changLen(val: any) {
        if (this.newChildData) {
            this.newChildData.forEach((item: any) => {
                item.labelList.forEach((subItem: any) => {
                    if (val.length > 29) {
                        subItem.disabled = true;
                    } else {
                        subItem.disabled = false;
                    }
                });
            });
        }
    }

    beforeRouteEnter(to: any, from: any, next: any) {
        if (from.name === "DataRetrievalIndex" || from.name === "SearchTask") {
            next((vm: any) => {
                vm.getAllData();
                vm.getSearchConditions();
                vm.tableData = [];
            });
        } else {
            next();
        }
    }

    created() {
        this.getAllData();
        this.getSearchConditions();
    }

    // 展开折叠
    handleChangeStyle() {
        this.layout = !this.layout;
    }

    // 当分页器的数据发生变化时
    getTable(val: any) {
        const dalist = {
            currentPage: val.page === 1 ? val.page : this.currentPage,
            pageSize: val.limit,
            searchConditionVoList: this.searchConditionVoList,
            typeId: this.typeId,
            cityCode: this.authArea.cityCode,
            dataIds: []
        };
        this.getTableData(dalist);
    }

    // 获取检索树形数据
    // 获取村的人员
    // 获取采集区域
    async getAllData() {
        const [res, result, response] = await Promise.all([
            this.$server["retrieval/getTree"]({ data: {} }),
            this.$server["project/ByGovernment"]({
                data: { governmentId: this.authArea.governmentId },
                loader: false
            }),
            this.$server["retrieval/byCode"]({
                data: { code: this.authArea.cityCode }
            })
        ]);
        // 获取检索树形数据
        if (res.data.code === 200) {
            this.retrieveData = res.data.data;
            // 处理树形结构的以及分类不能使用各自内部的children数组 不然组件会自动遍历 // 不满足ui展示图
            this.retrieveData = this.retrieveData
                .filter((item: any) => item.children)
                .map((item: any) => {
                    item.children.forEach((subItem: any) => {
                        this.setCurrentId.push(subItem.id);
                        // 添加两个数组 存储选择的值
                        subItem.searchList = [];
                        subItem.titleList = [];
                    });
                    // 添加一个list替换children 使属性结构满足ui页面要求
                    return { ...item, list: item.children };
                });
        }

        if (result.data.code === 200) {
            this.personList = result.data.data;
        }

        if (response.data.code === 200) {
            this.beatList = response.data.data;
        }
        this.itemList = [
            {
                field: "create_time",
                fieldName: "采集时间",
                conditionValue: "4",
                keyword1: "",
                keyword2: "",
                valueKindId: "3",
                active: true
            },
            {
                field: "city_code",
                fieldName: "采集区域",
                conditionValue: "3",
                keyword1: "",
                keyword2: "",
                valueKindId: "7",
                selects: this.beatList,
                multi: true,
                active: true
            },
            {
                field: "collector",
                fieldName: "采集人",
                conditionValue: "3",
                keyword1: "",
                keyword2: "",
                valueKindId: "7",
                selects: this.personList,
                multi: true,
                active: true
            }
        ];
        // 通过下面的全镇检索首页的资源分类进入改页面
        if (this.$route.query.typeId) {
            this.searchList = [];
            this.searchNameList = [];
            this.typeId = this.$route.query.typeId as string;
            this.title = this.$route.query.title as string;
            this.setCurrentKey = [this.typeId];
            this.queryCurrentId = this.typeId;
            this.queryCurrentFiled = this.$route.query.field as string;
            this.retrieveData.forEach((item: any) => {
                if (item.children) {
                    item.children.forEach((subItem: any) => {
                        if (subItem.id === this.typeId) {
                            this.childData = subItem.children;
                            this.childData = this.childData.map((item: any) => {
                                return {
                                    ...item,
                                    fieldName: item.name
                                };
                            });
                            this.childData = this.childData.filter(
                                (item: any) => {
                                    if (item.labelList) {
                                        return item.labelList.length > 0;
                                    }
                                }
                            );
                            this.newList = this.childData[0].labelList.slice(
                                0,
                                10
                            );
                            this.tableColumn = this.childData[0].labelList.slice(
                                0,
                                10
                            );
                            // this.setCurrentId = [item.id];
                        }
                    });
                }
            });
        }
        this.handleStartSearch();
        // this.setCurrentKey = [this.typeId];
        this.$nextTick(() => {
            (this.$refs.tree as any).setCurrentKey(this.typeId);
        });
    }

    // 获取表格数据
    async getTableData(data: any) {
        const res = await this.$server["retrieval/queryData"]({
            data: data
        });
        if (res.data.code === 200) {
            if (res.data.data) {
                this.tableData = res.data.data.records;
                this.total = res.data.data.total;
            } else {
                this.tableData = [];
                this.total = 0;
            }
        } else {
            this.tableData = [];
            this.total = 0;
        }
    }

    // 打开检索条件框
    maskShow() {
        this.dialogVisible = true;
        // 当使用了常用检索条件后进入进入检索列表页
        this.retrieveData.forEach((item: any) => {
            item.children.forEach((subItem: any) => {
                // 通过typeId去判断时哪个分类下的检索项  从新赋值
                if (subItem.id === this.typeId) {
                    // this.setCurrentId = [item.id];
                    this.childData = subItem.children;
                    this.$nextTick(() => {
                        this.searchList = subItem.searchList;
                        this.searchNameList = subItem.searchList;
                        const list = this.searchList.map((items: any) => {
                            return items.id;
                        });
                        (this.$refs.termTree as any).setCheckedKeys(list);
                    });
                }
            });
        });
        this.childData = this.childData.map((item: any) => {
            return { ...item, fieldName: item.name };
        });
        this.childData = this.childData.filter((item: any) => {
            if (item.labelList) {
                return item.labelList.length > 0;
            }
        });
    }

    //  打开选择表头弹窗
    handleSelectTableTitle() {
        this.retrieveData.forEach((item: any) => {
            item.children.forEach((subItem: any) => {
                // 通过typeId去判断时哪个分类下的检索项  从新赋值
                if (subItem.id === this.typeId) {
                    // this.setCurrentId = [item.id];
                    this.childData = subItem.children;
                    if (subItem.titleList.length) {
                        this.$nextTick(() => {
                            this.tableTitleNameList = subItem.titleList;
                            this.tableTitleList = subItem.titleList;
                            const titIdList = this.tableTitleNameList.map(
                                (item: any) => {
                                    return item.id;
                                }
                            );
                            (this.$refs.titleTree as any).setCheckedKeys(
                                titIdList
                            );
                        });
                    } else {
                        this.newList = this.childData[0].labelList.slice(0, 10);
                    }
                }
            });
        });
        this.childData = this.childData.map((item: any) => {
            return { ...item, fieldName: item.name };
        });
        this.childData = this.childData.filter((item: any) => {
            if (item.labelList) {
                return item.labelList.length > 0;
            }
        });
        this.tableVisible = true;
    }

    // 关闭检索条件弹窗
    handleClose(done: any) {
        done();
    }

    selectedItem(item: any) {
        item.active = !item.active;
    }

    // 删除检索条件
    deleteItem(item: any, index: any) {
        this.itemList.splice(index, 1);
        this.retrieveData.forEach((items: any) => {
            items.list.forEach((sub: any) => {
                sub.searchList.forEach((it: any, ind: any) => {
                    if (it.id === item.id) {
                        sub.searchList.splice(ind, 1);
                        this.searchList = sub.searchList;
                        this.searchNameList = sub.searchList;
                    }
                });
            });
        });
    }

    // 动态计算表格的索引值
    indexMethod(index: any) {
        return index + 1 + (this.currentPage - 1) * this.pageSize;
    }

    // 一级分类节点被点击时触发
    handleNodeClick(data: any) {
        if (data.parentId !== 1) {
            if (data.children) {
                this.childData = data.children;
                this.childData = this.childData.map((item: any) => {
                    return { ...item, fieldName: item.name };
                });
                this.childData = this.childData.filter((item: any) => {
                    if (item.labelList.length) {
                        return item.labelList;
                    }
                });
                this.queryCurrentId = data.id;
                this.queryCurrentFiled = data.field;
                this.title2 = data.name;
                this.typeId = data.id;
                this.searchNameList = [];
                this.searchList = [];
                this.tableTitleList = [];
                this.tableTitleNameList = [];
                this.retrieveData.forEach((item: any) => {
                    if (data.parentId === item.id) {
                        this.title1 = item.name;
                    }
                });
                this.title =
                    this.title1 && this.title2
                        ? `${this.title1}/${this.title2}`
                        : this.title;
                if (data.searchList && data.searchList.length > 0) {
                    // 把已经选择的检索条件的值赋值当前
                    this.searchNameList = data.searchList;
                    this.searchList = data.searchList;
                    const newList = this.searchNameList.map((item: any) => {
                        if (["6", "7"].includes(item.valueKindId)) {
                            return {
                                ...item,
                                conditionValue: "3",
                                keyword1: "",
                                keyword2: "",
                                active: true
                            };
                        } else if (item.valueKindId === "3") {
                            return {
                                ...item,
                                conditionValue: "4",
                                keyword1: "",
                                keyword2: "",
                                active: true
                            };
                        } else {
                            return {
                                ...item,
                                conditionValue: "5",
                                keyword1: "",
                                keyword2: "",
                                active: true
                            };
                        }
                    });
                    this.itemList = this.itemList.slice(0, 3).concat(newList);
                } else {
                    this.itemList = [
                        {
                            field: "create_time",
                            fieldName: "采集时间",
                            conditionValue: "4",
                            keyword1: "",
                            keyword2: "",
                            valueKindId: "3",
                            active: true
                        },
                        {
                            field: "city_code",
                            fieldName: "采集区域",
                            conditionValue: "3",
                            keyword1: "",
                            keyword2: "",
                            valueKindId: "7",
                            selects: this.beatList,
                            multi: true,
                            active: true
                        },
                        {
                            field: "collector",
                            fieldName: "采集人",
                            conditionValue: "3",
                            keyword1: "",
                            keyword2: "",
                            valueKindId: "7",
                            selects: this.personList,
                            multi: true,
                            active: true
                        }
                    ];
                }
                if (data.titleList && data.titleList.length > 0) {
                    // 把已经选择的检索条件的值赋值当前
                    this.newList = data.titleList;
                    this.tableTitleList = data.titleList;
                    this.tableTitleNameList = data.titleList;
                    this.tableColumn = data.titleList;
                } else {
                    if (
                        this.childData.length &&
                        this.childData[0].labelList.length
                    ) {
                        this.newList = this.childData[0].labelList.slice(0, 10);
                        this.tableColumn = this.newList;
                    }
                }
                this.handleStartSearch();
            } else {
                this.tableData = [];
                this.itemList = [];
            }
        }
    }

    // 检索条件复选框被点击时触发
    handleCheckChange(data: any, node: any) {
        const checkedNodesList = node.checkedNodes.filter((item: any) => {
            return !item.parentId;
        });
        this.searchList = checkedNodesList;
        this.searchNameList = checkedNodesList;
    }

    // 列表字段复选框点击时触发
    CheckChange(data: any, node: any) {
        const checkedNodesList = node.checkedNodes.filter((item: any) => {
            return !item.parentId;
        });
        this.tableTitleList = checkedNodesList;
        this.tableTitleNameList = checkedNodesList;
    }

    // 已选择的检索条件复选框点击时触发
    handleValChange(val: any) {
        const list: any[] = [];
        const arrlist: any[] = [];
        val.forEach((item: any) => {
            list.push(item.id);
            arrlist.push(item);
        });
        this.searchList = arrlist;
        (this.$refs.termTree as any).setCheckedKeys(list);
    }

    // 已选择的表头字段复选框点击时触发
    handleChange(val: any) {
        const list: any[] = [];
        const arrlist: any[] = [];
        val.forEach((item: any) => {
            list.push(item.id);
            arrlist.push(item);
        });
        this.tableTitleList = arrlist;
        (this.$refs.titleTree as any).setCheckedKeys(list);
    }

    // 设置检索条件
    handleSetSearchRule() {
        const newList = this.searchNameList.map((item: any) => {
            switch (item.valueKindId) {
            case "6":
                return {
                        ...item,
                        conditionValue: "3",
                        keyword1: "",
                        keyword2: "",
                        active: true
                };
            case "7":
                return {
                        ...item,
                        conditionValue: "5",
                        keyword1: "",
                        keyword2: "",
                        active: true,
                        multi: true
                };
            case "3":
                return {
                        ...item,
                        conditionValue: "4",
                        keyword1: "",
                        keyword2: "",
                        active: true
                };
            default:
                return {
                        ...item,
                        conditionValue: "5",
                        keyword1: "",
                        keyword2: "",
                        active: true
                };
            }
        });
        if (this.itemList.length > 3) {
            const firstTypeId = this.itemList[3].firstTypeId;
            if (firstTypeId === this.typeId) {
                this.itemList.slice(3).forEach((item: any) => {
                    newList.forEach((subItem: any) => {
                        if (subItem.id === item.id) {
                            subItem.conditionValue = item.conditionValue;
                            subItem.keyword1 = item.keyword1;
                            subItem.keyword2 = item.keyword2;
                            subItem.active = item.active;
                        }
                    });
                });
                this.itemList = this.itemList.slice(0, 3).concat(newList);
            } else {
                // 变了分类
                this.itemList = [
                    {
                        field: "create_time",
                        fieldName: "采集时间",
                        conditionValue: "4",
                        keyword1: "",
                        keyword2: "",
                        valueKindId: "3",
                        active: true
                    },
                    {
                        field: "city_code",
                        fieldName: "采集区域",
                        conditionValue: "3",
                        keyword1: "",
                        keyword2: "",
                        valueKindId: "7",
                        selects: this.beatList,
                        multi: true,
                        active: true
                    },
                    {
                        field: "collector",
                        fieldName: "采集人",
                        conditionValue: "3",
                        keyword1: "",
                        keyword2: "",
                        valueKindId: "7",
                        selects: this.personList,
                        multi: true,
                        active: true
                    }
                ];
                this.itemList = this.itemList.concat(newList);
            }
        } else {
            // 默认选择时
            this.itemList = [
                {
                    field: "create_time",
                    fieldName: "采集时间",
                    conditionValue: "4",
                    keyword1: "",
                    keyword2: "",
                    valueKindId: "3",
                    active: true
                },
                {
                    field: "city_code",
                    fieldName: "采集区域",
                    conditionValue: "3",
                    keyword1: "",
                    keyword2: "",
                    valueKindId: "7",
                    selects: this.beatList,
                    multi: true,
                    active: true
                },
                {
                    field: "collector",
                    fieldName: "采集人",
                    conditionValue: "3",
                    keyword1: "",
                    keyword2: "",
                    valueKindId: "7",
                    selects: this.personList,
                    multi: true,
                    active: true
                }
            ];
            this.itemList = this.itemList.concat(newList);
        }
        this.dialogVisible = false;
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
        this.retrieveData.forEach((item: any) => {
            item.children.forEach((subItem: any) => {
                if (subItem.id === this.typeId) {
                    subItem.searchList = this.searchNameList;
                }
            });
        });
        this.autoHeight = true;
    }

    // 选择表头
    handleSetTableTitleRule() {
        this.tableColumn = this.tableTitleNameList;
        this.tableVisible = false;
        this.retrieveData.forEach((item: any) => {
            item.children.forEach((subItem: any) => {
                if (subItem.id === this.typeId) {
                    subItem.titleList = this.tableTitleNameList;
                }
            });
        });
    }

    // 开始检索
    handleStartSearch() {
        let val = "";
        this.itemList = this.itemList.filter((item: any) => {
            return (item = item.active);
        });
        this.searchConditionVoList = this.itemList.map((item: any) => {
            if (item.keyword1 instanceof Array) {
                val = item.keyword1.toString().replace(/,/g, "###");
            } else {
                if (item.keyword2) {
                    val = `${item.keyword1}###${item.keyword2}`;
                } else {
                    val = `${item.keyword1}`;
                }
            }
            return {
                field: item.field,
                term: item.conditionValue,
                value: val
            };
        });
        this.currentPage = 1;
        this.pageSize = 10;
        const datalist = {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchConditionVoList: this.searchConditionVoList,
            typeId: this.typeId,
            cityCode: this.authArea.cityCode,
            dataIds: []
        };
        this.getTableData(datalist);
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
    }

    // 选择导出的数据
    handleSelectionChange(val: any) {
        this.multipleSelection = val;
    }

    // 打开导出附件弹窗
    handleExprotAnnex() {
        if (this.multipleSelection.length > 0) {
            this.enclosureDialog = true;
            this.tableColumn.map((item: any) => {
                if (["5", "8", "9", "10"].includes(item.valueKindId)) {
                    this.exportAnnexList.push(item);
                }
            });
        } else {
            return this.$message.error("请选择需要导出的附件的数据");
        }
    }

    // 关闭导出附件弹窗
    closeExprot() {
        this.enclosureDialog = false;
    }

    closeAnnex() {
        this.exportAnnexList = [];
        this.exportCheckList = [];
        this.annexName = [];
        this.$store.dispatch("changeText", "");
    }

    openAnnex() {
        this.$store.dispatch("changeText", "附件正在下载中...");
    }

    async exportAnnex() {
        const dataIds: any[] = this.multipleSelection.map((item: any) => {
            return item.id;
        });
        if (this.exportCheckList.length === 0) {
            return this.$message.error("请选择需要导出的附件");
        }
        if (this.annexName.length === 0) {
            return this.$message.error("请给导出的附件命名");
        }
        const res = await this.$server["retrieval/fileCompressExport"]({
            data: {
                dataIds,
                expColumnList: this.exportCheckList,
                folderNameColumns: this.annexName,
                field: this.queryCurrentFiled
            },
            responseType: "blob"
        });
        this.enclosureDialog = false;
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", `${this.title}检索结果附件.zip`);
        document.body.appendChild(link);
        link.click();
        if (this.multipleSelection.length > 0) {
            this.multipleSelection = [];
            (this.$refs.multipleTable as any).clearSelection();
        }
        document.body.removeChild(link);
        this.$message.success("下载成功");
    }

    // 图片预览
    previewImg(urls: any) {
        const list = urls.map((item: any) => {
            if (/^http/g.test(item)) {
                return item;
            }
            return this.$staticUrl + "/" + item;
        });
        dialogPreviewImg({ title: "预览图片", current: list });
    }

    videoPlay(url: any) {
        dialogPreviewVideoAudio({
            sourceUrl: /^http/g.test(url) ? url : this.$staticUrl + "/" + url
        });
    }

    // 视频预览
    previewVideo(file: any) {
        dialogPreviewVideoAudio({
            sourceUrl: /^http/g.test(file) ? file : this.$staticUrl + "/" + file
        });
    }

    // 去详情页面
    goToDetails(item: any) {
        this.$router.push({
            name: "DataRetrievalDetails",
            query: {
                currentId: this.queryCurrentId,
                currentFiled: this.queryCurrentFiled,
                id: item.id,
                title: this.title
            }
        });
    }

    // 去修改页面
    goToEdit(item: any) {
        this.$router.push({
            name: "DataRetrievalEditData",
            query: {
                currentId: this.queryCurrentId,
                currentFiled: this.queryCurrentFiled,
                id: item.id,
                title: this.title
            }
        });
    }

    // 去新增页面
    toAdd() {
        this.$router.push({
            name: "DataRetrievalEditData",
            query: {
                currentId: this.queryCurrentId,
                currentFiled: this.queryCurrentFiled,
                title: this.title
            }
        });
    }

    // 新增常用检索条件
    handleSave() {
        let val = "";
        const list: any[] = this.itemList.filter((item: any) => {
            return (item = item.active);
        });
        const searchList: any[] = list.map((item: any) => {
            if (item.keyword1 instanceof Array) {
                val = item.keyword1.toString().replace(/,/g, "###");
            } else {
                if (item.keyword2) {
                    val = `${item.keyword1}###${item.keyword2}`;
                } else {
                    val = `${item.keyword1}`;
                }
            }
            if (item.selects) {
                if (item.multi) {
                    return {
                        fieldName: item.fieldName,
                        field: item.field,
                        term: item.conditionValue,
                        value: val,
                        valueKind: item.valueKindId,
                        selects: JSON.stringify(item.selects),
                        multi: item.multi,
                        id: item.id ? item.id : ""
                    };
                } else {
                    return {
                        fieldName: item.fieldName,
                        field: item.field,
                        term: item.conditionValue,
                        value: val,
                        valueKind: item.valueKindId,
                        selects: JSON.stringify(item.selects),
                        id: item.id ? item.id : "",
                        firstTypeId: item.firstTypeId
                    };
                }
            } else {
                return {
                    fieldName: item.fieldName,
                    field: item.field,
                    term: item.conditionValue,
                    value: val,
                    valueKind: item.valueKindId,
                    id: item.id ? item.id : "",
                    firstTypeId: item.firstTypeId
                };
            }
        });

        this.$prompt("请输入常用检索条件名称", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"),
            inputErrorMessage: "只能输入中英文或者数字"
        })
            .then(async(value: any) => {
                const res = await this.$server["retrieval/newSaveCondition"]({
                    data: {
                        name: value.value,
                        searchConditions: searchList,
                        showColumnText: JSON.stringify(this.tableColumn),
                        typeNameConcat: this.title,
                        typeId: this.typeId
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("保存成功");
                    this.getSearchConditions();
                } else {
                    this.$message.error(res.data.message);
                }
            })
            .catch(() => {
                this.$message({ type: "info", message: "取消输入" });
            });
    }

    // 获取检索条件
    async getSearchConditions() {
        const res = await this.$server["retrieval/getCondition"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.conditionList = res.data.data;
        }
    }

    // 删除检索条件
    async handleRemoveItem(item: any) {
        const res = await this.$server["retrieval/DeleteCondition"]({
            data: {
                id: item.id
            }
        });
        if (res.data.code === 200) {
            this.$message.success("删除成功");
            this.getSearchConditions();
        }
    }

    // 通过已存在的常用检索设置检索条件和表头 回显
    handlePush(item: any) {
        this.typeId = item.typeId;
        this.setCurrentKey = [item.typeId];
        this.queryCurrentId = item.typeId;
        this.title = item.typeNameConcat;
        this.title1 = this.title.substring(0, this.title.indexOf("/"));
        this.title2 = this.title.substring(this.title.indexOf("/") + 1);
        this.tableColumn = JSON.parse(item.showColumnText);
        this.tableTitleList = this.tableColumn;
        this.tableTitleNameList = this.tableColumn;
        this.$nextTick(() => {
            (this.$refs.tree as any).setCurrentKey(this.typeId);
            if (this.multipleSelection.length > 0) {
                this.multipleSelection = [];
                (this.$refs.multipleTable as any).clearSelection();
            }
        });
        this.retrieveData.forEach((i: any) => {
            i.children.forEach((subItem: any) => {
                // 通过typeId去判断时哪个分类下的检索项 从新赋值
                if (subItem.id === this.typeId) {
                    // this.setCurrentId = [i.id];
                    this.queryCurrentFiled = subItem.field;
                    subItem.searchList = item.conditionList.slice(3);
                    subItem.titleList = this.tableColumn;
                }
            });
        });
        this.itemList = item.conditionList.map((subItem: any) => {
            if (subItem.value.indexOf("###") > -1) {
                if (subItem.valueKind === 7) {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value.replace(/###/g, ",").split(","),
                        keyword2: "",
                        valueKindId: subItem.valueKind.toString(),
                        multi: true,
                        selects: JSON.parse(subItem.selects),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                } else if (subItem.valueKind === 3) {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value.replace(/###/g, ",").split(","),
                        valueKindId: subItem.valueKind.toString(),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                } else {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value.match(/(\S*)###/)[1],
                        keyword2: subItem.value.match(/###(\S*)/)[1],
                        valueKindId: subItem.valueKind.toString(),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                }
            } else {
                if (subItem.valueKind === 7) {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: "",
                        keyword2: "",
                        valueKindId: subItem.valueKind.toString(),
                        multi: true,
                        selects: JSON.parse(subItem.selects),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                } else {
                    return {
                        field: subItem.field,
                        fieldName: subItem.fieldName,
                        active: true,
                        conditionValue: subItem.term
                            ? subItem.term.toString()
                            : "",
                        keyword1: subItem.value,
                        keyword2: "",
                        valueKindId: subItem.valueKind.toString(),
                        selects: JSON.parse(subItem.selects),
                        id: subItem.id || "",
                        firstTypeId: subItem.firstTypeId || ""
                    };
                }
            }
        });
        this.handleStartSearch();
        this.autoHeight = true;
    }

    // 全选
    selectAll() {
        if (this.exportColumnList.length < this.exprotTableCum.length) {
            this.exportColumnList = [];
            this.exprotTableCum.map(item => {
                this.exportColumnList.push(item.field);
            });
            this.exportColumnList.unshift("ALL");
        } else {
            // 取消全选
            this.exportColumnList = [];
        }
    }

    changeSelect(val: any) {
        if (!val.includes("ALL") && val.length === this.exprotTableCum.length) {
            this.exportColumnList.unshift("ALL");
        } else if (
            val.includes("ALL") &&
            val.length - 1 < this.exprotTableCum.length
        ) {
            this.exportColumnList = this.exportColumnList.filter(item => {
                return item !== "ALL";
            });
        }
    }

    removeTag(val: any) {
        if (val === "ALL") {
            this.exportColumnList = [];
        }
    }

    // 导出动态表格
    async handleExport() {
        const newList: any[] = [];
        const reg = new RegExp(/^([1-9]\d*|[0]{1,1})$/);
        if (this.exportColumnList.length) {
            this.exprotTableCum.forEach((item: any) => {
                this.exportColumnList.forEach((subItem: any) => {
                    if (item.field === subItem) {
                        newList.push({
                            column: item.field,
                            columnName: item.fieldName,
                            valueKindId: item.valueKindId
                        });
                    }
                });
            });
        } else {
            this.exprotTableCum.forEach((item: any) => {
                newList.push({
                    column: item.field,
                    columnName: item.fieldName,
                    valueKindId: item.valueKindId
                });
            });
        }
        const valueKindIdList: any[] = newList.filter(
            (item: any) => item.valueKindId === "5"
        );
        if (this.startNumber === "") {
            return this.$message.error("请输入开始序号");
        } else {
            if (Number(this.startNumber) === 0) {
                return this.$message.error("开始序号不能为0");
            }
            if (!reg.test(this.startNumber)) {
                return this.$message.error("开始序号须为正整数");
            }
        }
        if (this.endNumber === "") {
            return this.$message.error("请输入结束序号");
        } else {
            if (Number(this.endNumber) === 0) {
                return this.$message.error("结束序号不能为0");
            }
            if (!reg.test(this.endNumber)) {
                return this.$message.error("开始序号须为正整数");
            }
        }
        if (reg.test(this.startNumber) && reg.test(this.endNumber)) {
            const num = Number(this.endNumber) - Number(this.startNumber);
            if (valueKindIdList.length && num > 99) {
                return this.$message.error(
                    "当前选择的导出列中包含有图片选项，最多只能导出100条"
                );
            }
            if (!valueKindIdList.length && num > 4999) {
                return this.$message.error(
                    "一次最多只能导出5000条数据，请您分批次导出"
                );
            }
        }
        const res = await this.$server["retrieval/newExport"]({
            data: {
                expColumnList: newList,
                searchConditionVoList: this.searchConditionVoList,
                typeId: this.typeId,
                currentPage: this.startNumber,
                pageSize: this.endNumber,
                cityCode: this.authArea.cityCode
            },
            responseType: "blob"
        });
        const url = window.URL.createObjectURL(new Blob([res.data]));
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", `${this.title}检索结果.xlsx`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        this.handeleColse();
    }

    handeleColse() {
        this.dialogExport = false;
        this.startNumber = "";
        this.endNumber = "";
        this.exportColumnList = [];
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        background: transparent !important;
        height: calc(100% - 50px) !important;
        overflow: hidden;
    }
    .page-base-footer {
        width: 100%;
        min-width: unset !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .page-base-footer__right {
            margin-top: 0px !important;
        }
        .pagination-container {
            padding: 8px 16px;
        }
    }
    .el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
    .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
        display: none;
    }

    .el-dialog__footer .dialog-footer {
        button + button {
            margin-left: 10px !important;
        }
    }

    .el-table {
        .el-table__body-wrapper {
            overflow-y: auto;
            overflow-y: overlay;
        }
        table {
            width: 100% !important;
        }
        .btn-area {
            position: relative;
            i {
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 18px;
            }
        }
    }
}

/deep/.el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: #de2728;
    color: white;
}

button {
    outline: none;
}

.layout {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    &-left {
        width: 180px;
        background: #ffffff;
        flex-grow: 0;
        flex-shrink: 0;
        height: 100%;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        .el-tree {
            ::v-deep {
                .custom-tree-node {
                    font-size: 13px;
                }
                & > .el-tree-node {
                    & > .el-tree-node__content {
                        background: #f5f7fa;
                    }
                    &.is-current {
                        & > .el-tree-node__content {
                            background: #de2728;
                        }
                    }
                }
            }
        }
        &.hide {
            width: 0;
            padding: 0;
        }
    }
    .icon {
        width: 14px;
        height: 100%;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        i {
            width: 10px;
            height: 80px;
            cursor: pointer;
            margin-left: -3px;
            background-color: #ccc;
            display: inline-block;
            border-radius: 0px 16px 16px 0px;
            font-size: 12px;
            line-height: 80px;
            text-align: center;
            color: #ffffff;
        }
    }
    &-right {
        width: calc(100% - 190px);
        height: 100%;
        overflow-y: auto;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        &.show {
            width: calc(100% - 18px);
        }
        .content-box {
            height: 100%;
        }
    }
}

.retrieval-box {
    width: 100%;
    height: 57px;
    overflow: hidden;
    position: relative;
    .btn-icon {
        position: absolute;
        right: 5px;
        top: 10px;
        cursor: pointer;
        z-index: 9;
        transition: all 0.3s;
    }
    .search-left {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        .search-group {
            display: flex;
            flex-wrap: wrap;
            padding: 10px 0 0 18px;
            border-bottom: 1px solid #edeff2;
            .search-wrap {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                width: 23%;
                position: relative;
                padding: 0 30px 0 0;
                &:nth-child(n + 4) {
                    padding: 0 30px 0 20px;
                }
                &:hover {
                    .del-icon {
                        display: block;
                    }
                }

                .del-icon {
                    display: none;
                    position: absolute;
                    color: #fd7b7b;
                    right: 8px;
                    z-index: 10;
                    font-size: 21px;
                    cursor: pointer;
                }

                .search-item {
                    position: relative;
                    height: 36px;
                    width: 74%;
                    &.hasClass {
                        width: calc(100% - 60px);
                    }
                    @include flexLayout(flex, normal, center);
                    justify-content: space-between;
                    ::v-deep {
                        .input {
                            height: 100%;
                            margin-left: 4px;
                            input {
                                height: 100%;
                                font-size: 14px;
                                padding-right: 20px;
                                border: none;
                                border-bottom: 1px solid #dcdfe6;
                                border-radius: 4px 4px 0 0;
                            }
                        }
                        .el-select {
                            height: 36px;
                            width: 100%;
                        }
                    }
                }
                /deep/.el-date-editor {
                    height: 100%;
                    width: 100%;
                    .el-range-separator {
                        line-height: 24px;
                        width: 10%;
                    }
                    .el-range__icon {
                        line-height: 20px;
                    }
                    .el-range__close-icon {
                        line-height: 20px;
                    }
                }
                .icon-btn {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    background-image: url("~@/assets/icon/radio.png");
                    background-size: cover;
                    cursor: pointer;
                    position: absolute;
                    left: 0;
                    &.active {
                        background-image: url("~@/assets/icon/radio-active.png") !important;
                    }
                }
                .keyword {
                    font-size: 14px;
                    color: #37383a;
                    margin-right: 2px;
                    width: 70px;
                    max-width: 70px;
                    @include textEllipsis();
                }
            }
            .btn {
                display: flex;
                width: 22%;
                height: 36px;
                align-items: center;
                & > span {
                    flex-shrink: 0;
                    flex-grow: 0;
                }
                span {
                    cursor: pointer;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #2c82c9;
                    margin-left: 6px;
                }
            }
        }
        &-footer {
            display: flex;
            align-items: center;
            padding: 0 18px;
            & > span {
                flex-shrink: 0;
                flex-grow: 0;
            }
            span {
                cursor: pointer;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #2c82c9;
                margin-left: 6px;
            }
            .common-search {
                display: inline-flex;
                align-items: center;
                position: relative;
                p {
                    font-size: 14px;
                    flex-flow: 0;
                    flex-shrink: 0;
                }
                ul {
                    display: flex;
                    flex: 1;
                    li {
                        font-size: 0.14rem;
                        color: #6b6c70;
                        display: flex;
                        justify-content: space-between;
                        cursor: pointer;
                        margin-left: 0.06rem;
                        span {
                            max-width: 100px;
                            @include textEllipsis();
                        }
                        i {
                            display: none;
                            margin-left: 12px;
                        }
                        &:hover {
                            background: rgba(255, 209, 209, 0.5);
                            i {
                                display: block;
                                color: #c53535;
                                cursor: pointer;
                            }
                        }
                    }
                }
            }
        }
        & > .el-button {
            margin-left: 12px;
        }
    }
}

.container {
    margin-top: 10px;
    .content {
        .download {
            padding: 0 18px 0 6px;
            @include flexLayout(flex, justify, center);
            background-color: #fff;
            .btn {
                cursor: pointer;
                color: #2c82c9;
                font-weight: 500;
                padding: 10px;
                i {
                    font-size: 18px;
                }
                span {
                    font-size: 14px;
                }
            }
        }
    }
}

.tree-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__header {
            border-bottom: 1px solid #ccc;
        }
        .el-dialog__body {
            padding: 20px;
        }
        .dialog-footer {
            .el-button {
                padding: 10px 60px;
                & + .el-button {
                    margin-left: 60px;
                }
            }
        }
    }
    .tree-box {
        height: 600px;
        display: flex;
        justify-content: space-between;
        &-left {
            width: 40%;
            height: 100%;
            .el-tree {
                border: 1px solid #edeff2;
                padding: 10px 12px;
                margin-top: 12px;
                max-height: 500px;
                overflow-y: auto;
            }
        }
        &-right {
            width: 40%;
            height: 100%;
            .el-checkbox-group {
                padding: 10px 12px;
                max-height: 500px;
                overflow-y: auto;
                margin-top: 12px;
                display: flex;
                flex-direction: column;
            }
        }
    }
}

.annex-mask {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-dialog__body {
            padding: 10px 14px;
            p {
                margin: 0;
                line-height: 28px;
                color: #ccc;
            }

            & > div > div {
                display: flex;
                flex-direction: column;
                & > span {
                    margin-bottom: 10px;
                }
                & + div {
                    margin-top: 24px;
                }
            }

            .el-checkbox-group {
                .el-checkbox {
                    margin-right: 30px !important;
                }
            }
        }
    }
}
.export-dialog {
    * {
        margin: 0;
    }
    ::v-deep {
        .el-form-item__label {
            padding-bottom: 0;
            line-height: 32px;
        }
        .el-form-item__content {
            line-height: 32px;
            .el-select {
                width: 100%;
            }
        }
        .serial-number {
            .group {
                display: flex;
                span {
                    margin: 0 10px;
                }
            }
        }
        .tips {
            font-size: 12px;
            color: #ccc;
        }
    }
}

.table-img {
    width: 120px;
    height: 80px;
    cursor: pointer;
    object-fit: contain;
    background-color: #ccc;
}

.table-file {
    margin-right: 12px;
}

.address-text {
    @include textEllipsis();
}
</style>
